<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <title>进度</title>
    <link href="css/layui.css" rel="stylesheet" type="text/css" />
    <link href="step/step-lay/step.css" rel="stylesheet">
	<link href="css/progress.css" rel="stylesheet">
</head>
<body >
	 <div  class="wrapBox">
	      <div class="boxHeader">
	 		  <div class="dyzs"><i></i>合同</div>
	 		  <div class="czdb" >
				  <form class="layui-form" action="">
					  <select name="task" lay-verify="required"  id="htOption"  class="htOption">
					   <option value="">无</option>
						<!-- <option value="">通号设备供货合同</option> -->
					 </select>
				 </form> 
			  </div>	 
	 	 </div>
	 	 
	 	 <div  class="boxContent">
	 		  <div class="boxLeft">
					<div class="boxLeftHeader">
						 <div class="boxLeftTitle">项目关键路径</div>
					</div>
					<div class="tonghao_box">
						 <div class="tonghao_title">合同</div>
					</div>
					<div class="wrapContent">
						<div class="leftBoxCont">
							 <div>计划</div>
							 <div>实际</div>
							 <div>计划</div>
							 <div>实际</div>
						</div>
						<div class="rigntBoxCont">
							<div class="timeLine"></div>	
							<div class="timeLine"></div>	
							<div class="timeLine timeWrapBox"></div>
							<div class="timeLine"></div>
						</div>
				    </div>
				</div>	
				 
				 
	 		  <div class="boxRight">
	 			  <div  class="pxsm">
	 				  <div  class="pxsmBox">
	 					  <div class="pxsmTitle">
	 						  <i></i>偏差说明改进措施
	 					  </div>
	 				  </div>
	 				  <div  class="pxsmContent">
	 					 <div class="pxsmContentBox">
	 						 <div class="pxsmContentTitle">
	 							 <div id = "PCContent" class="activeBgColor">偏差说明</div>
	 							 <div id = "CSContent">改进措施</div>
	 						 </div>
	 						 <div class="pxsmWrapBox">
	 							 <div id = "PCContentBox" class="pxsmWrapStyle">

	 							 </div>
	 							  <div id = "CSContentBox" class="pxsmWrapStyle2">

	 							  </div>
	 						 </div>
	 					 </div> 
	 				  </div>
	 			  </div>
	 		  </div>
	 	 </div>
	 	
	 </div>
	 
	
	
	
	
</body>
<script src="layui.js"></script>
<script src="index.js"></script>
<script src="step/step-lay/step.js"></script>
<script src="modules/progress.js"></script>
<script>
    layui.config({
        base:''
    }).use(['element','form'], function(){
        var $ = layui.jquery
            ,form = layui.form
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

		var proId = window.localStorage.getItem("proId");
		var NYR = window.parent.document.getElementById("NYR").value;
		//2020-11
		var NYRArr = NYR.split("-");

		var data = {
			"proId":"10072A83-AF57-4C59-907A-9837787CC3DB",
			"year":NYRArr[0],
			"month":NYRArr[1]
		};
		$('.timeLine').empty();
		var dataSource = httpRequest($,data);
	   // console.log(dataSource)
		reloadDom(dataSource,$);
		setHTOption(form,dataSource);

		$(".pxsmContentTitle>div").on("click",function(){
			var  index = $(this).index();
			$(this).addClass("activeBgColor").siblings().removeClass('activeBgColor');
			if(index == 0){
				$(".pxsmWrapStyle").show();
				$(".pxsmWrapStyle2").hide();
			}else{
				$(".pxsmWrapStyle").hide();
				$(".pxsmWrapStyle2").show();
			}
		});

        $(document).on('click', ".dot", function () {
			
			var  idx = $(this).attr("data-id");
			var  mileid = $(this).attr("data-mileid");
			var dataParams = {
			    "mileId":mileid,
			    "year":NYRArr[0],
			    "month":NYRArr[1],
			    "conIdList":[idx],
				 "statu":1
			}
			var dataSource = httpRequestConn($,dataParams);
			var  result = dataSource?dataSource.ExplainMeasures:[];
			if(result.length === 0){
				 $("#PCContentBox").html("");
				 $("#CSContentBox").html(""); 
			}else{	
				var improve = result[0].improve?result[0].improve:"";
				var  reason =result[0].reason?result[0].reason:"";
				$("#PCContentBox").html("<div>"+improve+"</div><div>"+reason+"</div>");
				$("#CSContentBox").html("<div>"+improve+"</div><div>"+reason+"</div>"); 
			}
        });

		$(document).on('mouseover', ".dot", function () {
		 	$(this).parent().children(".boxItem").show();
		  })

		$(document).on('mouseout', ".dot", function () {
			$(this).parent().children(".boxItem:last-child").hide();
		})
		
		$(document).on('mouseover', ".dotClassBox", function () {
		 	$(this).parent().children(".boxItem").show();
		  })
		
		$(document).on('mouseout', ".dotClassBox", function () {
			$(this).parent().children(".boxItem:last-child").hide();
		})
		

		selectOnMonitor($,form,proId,NYRArr);
		
		
		$(".dotClassBox").on("click",function(dataSource){
		   var  idx = $(this).attr("data-id");
		   var  mileid = $(this).attr("data-mileid");
		        $(".itemActiveBg>.dotClassBox").removeClass('act_BgColor');
		        $(this).addClass("act_BgColor");
	
		   var dataParams = {
		       // "proId":"10072A83-AF57-4C59-907A-9837787CC3DB",
			   "mileId":mileid,
		       "year":NYRArr[0],
		       "month":NYRArr[1],
		       "conIdList":[idx],
			   "statu":1
		   }
		   
		   //select 
		 var dataSourceData = httpRequest($,data);
		 var arrData  = dataSourceData.conLabel?dataSourceData.conLabel:[];
			 if(arrData.length != 0){
				 for (var i=0;i<arrData.length;i++) {
					 if(arrData[i].value == idx){
						 $("#htOption option:selected").empty(arrData[i].value);
						 $("#htOption option:selected").append(arrData[i].label);
					 }
				 }
				 form.render('select'); 
			 }
		
		
		 var dataSource = httpRequestConn($,dataParams);
		 var  result = dataSource.ExplainMeasures;
		 initDomConn(dataSource,$,mileid);
		 
		 // 偏差说明 
			 if(result.length === 0){
				 $("#PCContentBox").html("");
				 $("#CSContentBox").html(""); 
			 }else{
				var improve = result[0].improve?result[0].improve:"";
				var  reason =result[0].reason?result[0].reason:"";
				$("#PCContentBox").html("<div>"+improve+"</div><div>"+reason+"</div>");
				$("#CSContentBox").html("<div>"+improve+"</div><div>"+reason+"</div>"); 
			 }
		})

      
	   
	   
    });
</script>

</html>